<template>
	<view class="container-white">
		<view class="status_bar"><view class="top_view"></view></view>
		<view style="height: 100upx;">
			<view class="tab-bar">
				<view style="width: 40upx; height: 34upx;position: absolute;left: 30upx;top:33upx;text-align: center;">
					<image src="/static/icon/icon-back.png" style="width: 20upx; height: 34upx;" @click="backToTopic" />
				</view>
				<view style="flex: 1;text-align: center;">答题卡</view>
				<view style="position: absolute;right: 30upx;text-align: center;width: 100upx;">
					<image src="/static/icon/icon-daojishi.png" style="width: 40upx;height: 24upx;" />
					<view style="font-size: 16upx;font-weight: normal;">{{ remainingTime }}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view style="display: flex;flex-wrap: wrap;">
				<!-- <view class="options" v-for="(item,index) in scantron" :key="index">
					<view v-if="index<=num" class="stide" :class="item.answ == '' || item.answ == null || item.answ == undefind?'':'isCheck'" @tap="goTopic(index)">{{index+1}}</view>
					<view v-else  class="stide disable">{{index+1}}</view>
        </view>-->
				<view class="options" v-for="(item, index) in num" :key="index">
					<view class="stide" :class="item.checked ? 'isCheck' : ''" @tap="goTopic(index)">{{ item.num }}</view>
				</view>
			</view>
		</view>

		<view class="footer"><button type="primary" class="primary footer-btn" @click="hidden = true">交卷并查看结果</button></view>

		<model v-if="hidden">
			<view class="model-content">交卷后将结束本次考试，确定交卷吗？</view>
			<view class="model-footer">
				<button class="model-footer-btn cancel" @click="hidden = false">取消</button>
				<button type="primary" class="model-footer-btn primary" @click="confirm">交卷</button>
			</view>
		</model>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';
import { formatSeconds } from '../../common/common';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			scantron: [],
			params: {},
			// num: 0,
			num: [],
			hidden: false,
			duration: 0,
			remainingTime: ''
		};
	},
	computed: mapState(['questionList']),
	onLoad(options) {
		this.params = {
			examQuesList: JSON.stringify(
				this.questionList.map(x => ({
					quesId: x.quesId,
					userAnsw: x.userAnsw
				}))
			),
			examId: options.examId,
			userId: uni.getStorageSync('userId')
		};
		this.Interval();
		let i = 0;
		this.timer = setInterval(_ => {
			this.Interval();
		}, 1e3);
		this.num = this.questionList
			.map(x => x.userAnsw !== '' && x.userAnsw !== null)
			.map((x, i) => ({
				num: i + 1,
				checked: x
			}));
	},
	onBackPress() {
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
	},
	methods: {
		Interval() {
			let second = uni.getStorageSync('second');
			if (second > 0) {
				second--;
				this.remainingTime = formatSeconds(second);
				uni.setStorageSync('second', second);
			} else {
				this.confirm();
			}
		},
		// 查看答题卡对应题目
		goTopic(index) {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			uni.setStorageSync('examIndex', index);
			this.$store.commit('setTestIndex', index);
			uni.navigateBack(1);
		},
		// 确认交卷
		confirm() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			post_md5('/exam-app/exam/submitpaper', this.params, false).then(res => {
				if (res.code == 500) {
					uni.reLaunch({
						url: 'examination-error?error=' + res.msg
					});
				} else {
					uni.reLaunch({
						url: 'examination-result?id=' + res.data
					});
				}
			});
		},
		backToTopic() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			uni.navigateBack(1);
		}
	}
};
</script>

<style>
.content {
	margin: 25upx 0 80upx;
	background: #ffffff;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	position: absolute;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background: #ffffff;
	top: 0;
	z-index: 999;
}

.tab-bar {
	display: flex;
	align-items: center;
	height: 100upx;
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	z-index: 100;
	color: #000000;
	font-size: 36upx;
	font-weight: bold;
	width: 100%;
	background: #ffffff;
}

.options {
	width: 118upx;
	display: flex;
	justify-content: center;
}

.stide {
	margin: 0;
}

.footer {
	height: 98upx;
	font-size: 28upx;
	background: #02a8f4;
}

.disable {
	color: #999999;
	border: 1px solid #999999;
}
</style>

<style scoped>
.isCheck {
	background: #02a8f4;
	color: #ffffff;
}
</style>
